<template>
  <section class="choose-book-list mt30 app-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :span-method="objectSpanMethod"
      :height="tableHeight"
      :show-overflow-tooltip="true"
    >
      <el-table-column
        prop="teacher_name"
        label="教师"
        width="120"
        :show-tooltip-when-overflow="true"
        align="left">
      </el-table-column>
      <el-table-column
        prop="telphone"
        label="联系方式"
        width="120"
        :show-tooltip-when-overflow="true"
        align="left"
      >
      </el-table-column>
      <el-table-column
        prop="course"
        label="课程"
        width="180"
        :show-tooltip-when-overflow="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="class_name"
        label="班级"
        :show-tooltip-when-overflow="true"
        align="center"
      >
        <template slot-scope="scope">
          <el-tooltip effect="light" placement="top">
            <template slot="content">
              <div slot="content" v-for="(item, index) in scope.row.class_name" :key="index">{{item}}</div>
            </template>
            <div class="pr20 posr txt-ellipsis">
              <el-tag  v-for="(item, index) in scope.row.class_name"
              class="tal pl20 mr6 mt6"
              :key="index" type="success"
              >
              {{item}}
              </el-tag>
              <!--<i class="posa el-icon-arrow-right" style=" top: 50%; right: 10px;-webkit-transform: translateY(-50%);" v-if="scope.row.class_name.length >= 5" ></i>-->
            </div>
          </el-tooltip>

          <!--<el-tag v-for="(item , index) in scope.row.class_name" :key="index" type="success" class="mr6 mt6">{{item}}</el-tag>-->
        </template>
      </el-table-column>
      <el-table-column
        prop="times"
        label="操作"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <div class="notice">已催 <span class="cff0500">{{scope.row.times}}</span>次</div>
          <div class="tac mt10">
            <el-button type="warning" size="small" v-if="scope.row.status==='未完成'" @click="$message.success('已催选书')">催选书</el-button>
            <el-button type="info" size="small" v-if="scope.row.status==='已完成'" >催选书</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        porp="status"
        label="状态"
        align="center"
        width="260"
        :filters="[{ text: '已完成', value: '家' }, { text: '未完成', value: '公司' }]"
        :filter-method="filterMethod"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <div class="tac">
            <router-link :to="{name: 'secretary_reservation_manage'}" class="db">{{scope.row.status}}</router-link>
            <router-link :to="{name: 'secretary_reservation_manage'}" class="cff0500" >{{scope.row.reason}}</router-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div>

      <div class="pagination-container fl">
        <el-pagination background :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <div class="under-button tar mt50 fr">
        <el-button type="warning" size="small" @click="$message.success('选书提交成功')">完成选书</el-button>
        <el-button type="primary" size="small" @click="$message.success('生成表单成功')">生成表单</el-button>
      </div>
    </div>
    <router-link to="/foo" tag="li" active-class="heightLight">foo</router-link>
<!-- 渲染结果 -->
  </section>
</template>

<script>
import {
  times
} from 'lodash'

export default {
  data () {
    return {
      tableHeight: 0,
      total: 100,
      listQuery: {}

    }
  },

  computed: {
    tableData () {
      return times(30, index => {
        if (index % 3 === 0) {
          return {teacher_name: '李王生', telphone: '13566773478', course: '单片机原理', class_name: ['班级一', '班级一', '班级一', '班级一' ], times: 1, status: '未完成', reason: '未选书，未审核，未审核教师用书', course_count: 3, index: 1}
        } else {
          return {teacher_name: '李王生', telphone: '13566773478', course: '单片机原理', class_name: ['班级一', '班级一', '班级一', '班级一' ], times: 1, status: '未完成', reason: '未选书，未审核，未审核教师用书', course_count: 3}
        }
      })
    }
  },

  methods: {
    filterMethod (value, row, column) {

    },

    objectSpanMethod ({row, column, rowIndex, columnIndex}) {
      if (columnIndex !== 2 && columnIndex !== 3 && row.course_count > 1) {
        if (row.index === 1) {
          return [row.course_count, 1]
        } else {
          return [0, 0]
        }
      }
    },
    calculateTableHeight () {
    //   debugger
      this.$nextTick(() => {
        let height = 0
        if (this.$el && this.$el.parentNode) {
          height = parseInt(this.$el.parentNode.style.height)
          height = height - 170
        }
        this.tableHeight = height
      })
    }
  },
  mounted () {
    this.calculateTableHeight()
  }
}
</script>

<style scoped>
.heightLight{
  color: turquoise;
  font-size: 50px;
}
</style>
